import React, { Component } from "react";
import "./01-人员列表.css";
// 定义常量用于展示，减少在代码中使用魔法值
const STATUS_TEXT = {
  0: "禁用",
  1: "启用",
};
const STATUS_BUTTON_TEXT = {
  0: "启用",
  1: "禁用",
};
export default class App extends Component {
  state = {
    list: [1, 2, 3, 4, 4],
    list2: [
      { id: 1, name: "用户1", status: 1 },
      { id: 2, name: "用户2", status: 1 },
      { id: 3, name: "用户3", status: 1 },
    ],
  };
  inputRef = React.createRef();
  handleDelete(index) {
    // 浅拷贝，在react中不能直接操作state里的值
    const listResult = [...this.state.list2];
    // 数组删除方法
    listResult.splice(index, 1);
    // 更新状态
    this.setState({ list2: listResult });
  }
  handleAdd() {
    // ? 是es7中的写法，在没有值的时候不会直接报错
    if (this.inputRef.current?.value) {
      const addItem = {
        id: Math.floor(Math.random() * 10000),
        name: this.inputRef.current?.value,
        status: 1,
      };
      // 在状态更新成功后将input置空
      this.setState({ list2: [...this.state.list2, addItem] }, () => {
        this.inputRef.current.value = "";
      });
    }
  }
  handleChangeStatus(index) {
    // 浅拷贝
    const listResult = [...this.state.list2];
    // 向后端请求的一个步骤
    // XXXXXXX
    // 更改状态
    listResult[index].status = listResult[index].status === 0 ? 1 : 0;
    this.setState({ list2: listResult });
  }
  render() {
    return (
      <div>
        <div className="top-wrapper">
          <input type="text" ref={this.inputRef} />
          <button onClick={() => this.handleAdd()}>添加</button>
        </div>
        {/* 没有数据时展示 */}
        {this.state.list2.length === 0 && (
          <div className="empty">暂时没有数据哦</div>
        )}
        {/* 有数据时展示 */}
        <ul>
          {this.state.list2.map((item, index) => (
            <li style={{ display: "flex", alignItems: "center" }} key={item.id}>
              <div className="item-name">{item.name}</div>
              {/* 这里使用常量用于展示 */}
              <div className="item-status">{STATUS_TEXT[item.status]}</div>
              <div className="button-wrapper">
                <button onClick={() => this.handleDelete(index)}>删除</button>
                {/* 更改状态，这里使用常量用于展示 */}
                <button onClick={() => this.handleChangeStatus(index)}>
                  {STATUS_BUTTON_TEXT[item.status]}
                </button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
